<template>
   <view class="content  pl-32rpx pr-32rpx text-size-24rpx text-center flex justify-between relative z-999"
      :class="[theme == 'dark' ? 'dark' : 'light']">
	  <scroll-view class="scrollBox" scroll-x="true" @scroll="scroll" scroll-left="125">
	  							<block  v-for="(info, index) in pointsCateList" :key="index">
	  								<view :class="[selected == index ?'tabBox on':'tabBox']" @click="selectCate(info,index)">
	  									<view class="tabIcon">
											<image :src="selected == index ? ossurl(info.icon) : ossurl(info.default_icon)" mode="widthFix"></image>
										</view>
	  									<view class="tabText">{{info.title}}</view>
	  								</view>
	  							</block>
	  					
	  </scroll-view>

   </view>
</template>

<script>
import { getPointsCate } from '@/api/home';
import { navigateTo, navigateBack } from "@/hooks"
import { ossurl } from '@/utils/index';
export default {
   props: ["theme"],
   data() {
      return {
         navigateTo,
		 pointsCateList:[],
		 selected:0,
      }
   },
   onLoad(options) {

   },
   computed: {
     rec_url() {
     	return this.$store.getters.rec_url;
     },

   },
   mounted() {
      this.getTopNav()
   },
   methods: {
	   ossurl,
	   //景点分类
	   getTopNav()
	   {
		   getPointsCate({}).then(res => {
		       if (res.code == 200) {
					console.log('景点分类',res);
					this.pointsCateList = res.data;
					
		       }
		   })
			
			
	   },
	   selectCate(info,index)
	   {
		   this.selected = index;
		   console.log(info.title);
		   uni.$emit('top_nav_change', info);
	   },
     
   }
}
</script>


<style lang="scss" scoped>
.dark {
   background-color: none;
   color: #fff;
}

.light {
   background-color: #fff;


}

		.scrollBox {
				width: 100%;
				height: 116rpx;
				white-space: nowrap;
				margin-top: 20rpx;
			}

			.tabBox {
				display: inline-block;
				width:125rpx;
				height: auto;
				text-align: center;
				
				
			}
		
			.tabIcon image{ width: 48rpx; height: 48rpx; margin-top: 20rpx;}
			.tabText{ font-size: 26rpx; font-weight: bold; line-height: 38rpx; color: #3D3D3D;}
			
			.on .tabText{ color: #0CCA92;}
			


</style>
